<template>
	<view class="main">
		<view class="inv-h-w" style="top: 0;">
			<view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="tab(0)">全部</view>
			<view :class="['inv-h',Inv==2?'inv-h-se':'']" @click="tab(2)">已付款</view>
			<view :class="['inv-h',Inv==3?'inv-h-se':'']" @click="tab(3)">待结算</view>
			<view :class="['inv-h',Inv==4?'inv-h-se':'']" @click="tab(4)">已完成</view>
		</view>
		<!-- <view class="inv-h-w">
			<view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="tab(0,1)">全部</view>
			<view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="tab(1,1)">待核销</view>
			<view :class="['inv-h',Inv==3?'inv-h-se':'']" @click="tab(3,1)">已完成</view>
		</view> -->
		<view style="width: 100%;height: 10vw;float: left;"></view>
		<view class="msg_list" v-for="(item, index) in orderlist">
			<view class="msg_list_tit">
				<text class="t1">订 单 号：{{item.tradeId}}</text>
				<text class="t1">购买时间：{{item.createdTime}}</text>
				<view class="t1"><text class="t1" style="width: auto;">订单状态：</text>
					<!-- //0已取消 1未付款 2已付款 3待结算 4已完成 -->
					<text class="t1" style="width: auto;" v-if="item.status==0">已退款</text>
					<text class="t1" style="width: auto;" v-if="item.status==1">未付款</text>
					<text class="t1" style="width: auto;" v-if="item.status==2">已付款</text>
					<text class="t1" style="width: auto;" v-if="item.status==3">待结算</text>
					<text class="t1" style="width: auto;" v-if="item.status==4">已完成</text>
					<text class="t1" style="width: auto;" v-if="item.status==5">待发货</text>
					<text class="t1" style="width: auto;" v-if="item.status==6">已发货</text>
					<text class="t1" style="width: auto;" v-if="item.status==7">退款中</text>
					<view class="hexiao t3" v-if="item.status==2" @click="heixiao(item.id)">核销</view>
					<view class="hexiao t3" v-if="item.status==2" @click="delivery(item.tradeId,item.status)">发货</view>
				</view>
				<!-- <text class="t1">店铺名称：{{item.mchName}}</text>
				<text class="t1">店铺地址：{{item.mchAddress}}</text> -->
				<text class="t1">买家姓名：{{item.nickName}}</text>
				<text class="t1">买家电话：{{item.payerPhone}}</text>
				<text class="t1">买家地址：{{item.payerAddress}}</text>
				<text class="t1">快递单号：{{item.trackingNo}}</text>
				<text class="t1">商品名称：{{item.name}}</text>
				<text class="t11">成交金额:￥{{item.amount/100}}元</text>
			</view>
			<!-- <view class="msg_list_tit1">
			<view class="msg_list_img">
				<image :src="item.picUrl" mode="aspectFit"></image>
			</view>
			</view> -->
		</view>
		<view class="zanwu" v-show="jiazai" style="padding-top: 4vw;"><text class="t7">{{more}}</text></view>
		<view class="zanwu" v-show="zanwu">
			<image src="../../static/img/zanwu.png" mode="widthFix"></image><text class="t8">{{wu}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pid: '',
				orderlist: [],
				pages: 1,
				mainid: '',
				ismore: true,
				more: '加载更多',
				jiazai: false,
				wu: "暂无数据",
				zanwu: false,
				status: '',
				Inv: 0,
			}
		},
		// 监听触底
		onReachBottom() {
			//阻止重复加载
			if (this.ismore == false) {
				return;
			}
			this.pages++;
			this.orlist();

		},

		onLoad(options) {
			var _this = this;
			console.log(options.id)
			_this.pid = options.id;
			uni.getStorage({
				key: 'user',
				success: function(res) {
					_this.mainid = res.data.id;
					console.log(_this.status)
					// _this.orlist();
				}
			});
		},
		onShow() {
			var _this = this;
			setTimeout(function() {
				_this.orlist();
			}, 1000);
		},
		methods: {
			tab(i) {
				this.Inv = i;
				if (i == 0) {
					this.status = '';
				} else {
					this.status = i;
				}
				this.orderlist = []
				this.orlist();
			},
			heixiao(e) {
				if (!e) {
					uni.showToast({
						title: '商品不存在！',
						icon: 'none',
						duration: 2000
					});
				} else {
					uni.navigateTo({
						url: '/pages/saoma/saoma?id=' + e
					});
				}
			},
			delivery(tradeId,status){
				uni.navigateTo({
					url:'/pages/order/delivery?status='+status+'&tradeId='+tradeId+'&payeeId='+this.mainid
				})
			},
			orsure() {
				uni.request({
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
					},
					url: getApp().globalData.url + 'ad/checkTrade', //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						payeeId: this.mainid, //	收款人Id		false	 string
						tradeId: this.pid, //	订单Id		false	 string
					},
					success: (res) => {
						uni.hideLoading(); //关闭加载动画
						if (res.data.status == '200') {
							uni.showToast({
								title: '核销成功',
								icon: 'none',
								duration: 2000
							});
						}
					},
					fail: (error) => {
						uni.hideLoading();
						// this.checks = true
						uni.showToast({
							title: error,
							icon: 'none',
							duration: 2000
						});
						console.log(error)
					}
				});
			},
			// list(e) {
			// 	// console.log(e);
			// 	uni.navigateTo({
			// 		url: '/pages/msg/msg?id=' + e
			// 	});
			// },
			orlist() {
				uni.showLoading()
				var data = {
					adId: this.pid, //	广告ID		true	string
					// id: this.mainid, //	用户ID（mainId）		true	string
					status: this.status, //状态4种，1已支付，2已核销，3金额发放中，4，已完成
				};
				data = JSON.stringify(data);
				console.log(data);
				uni.request({
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
					},
					url: getApp().globalData.url + 'ad/adSellLogPage/' + this.mainid + '/' + this
						.pages, //仅为示例，并非真实接口地址。
					method: 'POST',
					data: data,
					success: (res) => {
						uni.hideLoading(); //关闭加载动画
						console.log(res);
						if (res.data.status == '200') {

							if (res.data.data.records.length == 0 && this.pages != 1) {
								this.more = "没有更多数据了";
								this.jiazai = true;
								this.zanwu = false;
								this.ismore = false;
							} else if (res.data.data.records.length == 0 && this.pages == 1) {
								this.more = "暂无数据";
								this.jiazai = false;
								this.zanwu = true;
								this.ismore = false;
							} else if (res.data.data.records.length < 10) {
								this.jiazai = true;
								this.zanwu = false;
								this.ismore = false;
								this.more = "没有更多数据了";
							} else {
								this.more = "暂无数据";
								this.jiazai = true;
								this.zanwu = false;
								this.ismore = true;
							}
							// for (var i = 0; i < res.data.data.length; i++) {
							// 	res.data.data[i].createdTime = res.data.data[i].createdTime.split("T");
							// }
							if (this.pages == 1) {

								this.orderlist = res.data.data.records;
							} else {
								for (var i = 0; i < res.data.data.records.length; i++) {
									this.orderlist.push(res.data.data.records);
								}
							}
						}
					},
					fail: (error) => {
						uni.hideLoading();
						// this.checks = true
						uni.showToast({
							title: error,
							icon: 'none',
							duration: 2000
						});
						console.log(error)
					}
				});
			},
		}
	}
</script>

<style>
	.inv-h-w {
		background-color: #FFFFFF;
		height: 10vw;
		display: flex;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
	}

	.inv-h {
		font-size: 0.8rem;
		flex: 1;
		text-align: center;
		color: #333;
		height: 10vw;
		line-height: 10vw;
	}

	.inv-h-se {
		color: #F1C75E;
		border-bottom: 1vw solid #F1C75E;
	}

	.hexiao {
		width: auto;
		height: 7vw;
		line-height: 7vw;
		display: block;
		float: right;
		margin-left: 4vw;
		border-radius: 2vw;
		background: #F1C75E;
		padding: 0 5vw;
	}

	.msg_list {
		width: 100%;
		height: auto;
		display: block;
		float: left;
		box-shadow: 0px 0px 5px #F2F2F2;
		padding: 2vw 3vw;
		border-radius: 1vw;
		/* border: 1px solid #F2F2F2; */
		margin-top: 4vw;
		background: #fff;
	}

	.msg_list_img {
		width: 30vw;
		height: 30vw;
		display: block;
		float: left;
	}

	.msg_list_img image {
		width: 100%;
		height: 100%;
	}

	.msg_list_tit1 {
		width: 100;
		height: auto;
		display: block;
		float: left;
		padding: 1vw 0;
	}

	.msg_list_tit1 text {
		width: 100%;
		height: 8vw;
		line-height: 8vw;
		display: block;
		float: left;
		overflow: hidden;
		padding: 0 4vw;
	}

	.msg_list_tit {
		width: 100;
		height: auto;
		display: block;
		float: left;
		padding: 1vw 0;
	}

	.msg_list_tit text {
		width: 100%;
		height: 8vw;
		line-height: 8vw;
		display: block;
		float: left;
		overflow: hidden;
	}

	.about_info {
		width: 100%;
		height: auto;
		display: block;
		float: left;
		line-height: 7vw;
	}

	.msg_list_time {
		width: 30%;
		height: auto;
		display: block;
		float: right;
		text-align: right;
		line-height: 10vw;
		margin-top: 1vw;
	}

	.imgs {
		width: 100%;
		height: auto;
		display: block;
		float: left;
	}
</style>
